本系列已集結成書從 0 到 Webpack：學習 Modern Web 專案的建置方式，這是一本完整介紹 Webpack 的專書，如有學習 Webpack 相關的問題可以參考此書。

在 2017 年底，那時的我剛剛換到了新公司，椅子都還沒有做熱，老闆就派給我一個重大的任務：重寫舊有的 SCADA 系統，這是一個畫面以 Web 呈現，用 ASP 開發，已經使用了 30 年的系統。老闆的條件只有指定後端使用 ASP.NET ，前端使用 Vue.js 開發。那個時候加我只有兩個人在做此系統，原本我是想寫後端的，但卻被老闆分派到前端去了。身為菜雞的我哪有說話的份，只能認命的開工了（現在想起來，要是沒有被分配到前端的開發，說不定現在的我就不是個前端工程師了...）。

在這之前，我只有使用過 AngularJS ，而且沒有任何架構前端專案的經驗，但是老闆都開金口了，只能硬著頭皮做了。我用 Vue.js 的官方文件學習了 Vue.js 的語法，所幸 Vue.js 的文件易讀而且完整，省去了許多找資料的時間。

學會 Vue.js 後，接著就是架構專案。那時的 Vue.js 已經有 CLI 工具了（當時還是 2.x 版本），因此我就用 Vue CLI 的 webpack 模板產生起始專案，並以此專案做深入的研究。當時由於我對前端一無所知，因此我研究了 package.json 中所引入的每個程式庫：ESLint、Jest、Babel、PostCSS...等，種類繁多，讓我眼花撩亂。雖然每個工具庫的功用都不相同，但是大部分都會提到一個東西，那就是本系列的主角: Webpack 。

從建置專案、開發環境、轉換語言到網頁最佳化都可以看到 Webpack 的蹤影，因此在架構專案的每個日子裡我都與它一起奮鬥著。隨著在 Webpack 的配置檔中加入的設定越來越多，專案也慢慢地完成了。

自此之後，我對 Webpack 以及它的相關配置產生了極大的興趣，每次瀏覽新專案的 Webpack（或是別的打包工具，像是 rollup）配置檔，我都可以學習到這個專案大部分使用的技術及其對於效能所做的優化處理，進而提升自我對網頁前端工程的知識。

寫作動機

在實務上，大部分的人在建置起始專案時都會選擇使用 CLI 工具（像是 Vue CLI、Create React App），而這些工具都已經配置好 Webpack 了，不需要開發者自己配置。當有配置的需求時，通常也只會更改少部分的設定，並不會通盤了解整個 Webpack 的運作。

Webpack 本身其實也只是個打包工具而已，對於一般的前端工程師來說，這樣的知識可能就足夠了，但是對於資深工程師、架構師這類會觸及到架構專案的人來說，對 Webpack 一知半解會是非常危險的，這代表你不是全盤的了解整個專案的基礎建設，弄得不好不但產品效能低落，連開發時程也可能大幅的延長。

然而當你下定決心要學習 Webpack 時，它那艱深難讀的官方文件使得不少初學者（包括我）在此打了退堂鼓。就算你讀完了，往往也會被文件裡面出現的各種名詞及情境所困惑。

Webpack 作為打包工具，是需要配合背景知識及情境才能運用在實際的專案中。但是 Webpack 的學習資源比較多是片段式的，通常教學文章只專注在某個情境的使用方式上，對於剛學習網頁技術的新手來說難以入門。

由於以上的原因，這個系列文希望可以當作初學者的 Webpack 入門書，同時也讓資深的開發者藉由不同的情境學習相對應的解決方案，以此提升對於 Webpack 及網頁前端工程的認識。

系列目標

本系列文希望成為讀者學習 Webpack 的入門磚，讓零經驗的 Webpack 學習者建立對 Webpack 的基礎知識，學會配置專案。之後配合各種開發情境以實際的例子教學，加深加廣讀者對於網頁前端工程的技術知識。最後深入講解 Webpack 的內部運作，作為系列文的總結。

希望閱讀完後，不管剛開始對於 Webpack 認識深或淺的讀者都可以從中獲得知識，成為開發的力量。

使用版本

系列文使用 webpack 4 ，由於 5 已經在 beta 階段，當進入正式版本時，系列文會對版本作升級的動作。

前置技能

由於系列文會專注於講解 webpack 本身，因此在閱讀之前，有下面的基本知識會比較容易進入狀況：

• 語言：HTML、CSS 及 JavaScript
• 網頁技術：HTTP
• JavaScript 執行環境：node.js
• 套件管理器：npm

章節概述

本文會分為四大主題，由淺入深的探討 webpack 相關的知識。

第一章 - 認識 Webpack

這章會涵蓋 Webpack 的基本知識。講述為什麼網頁開發會需要像是 Webpack 這類的打包工具，解釋背後的歷史淵源。接著講解 Webpack 整個運作流程，並且對相關的名詞做解釋。最後撰寫第一隻使用 Webpack 建置的程式。

這章的目的在於讓讀者對於什麼是 Webpack ？、為什麼要使用 Webpack ？ 這類的問題得到解答。

第二章 - 配置 Webpack

這章會講解如何配置 Webpack ，詳細介紹幾個常用的配置屬性。

讀完這章後，希望讀者在知道自己要配置什麼的情況下，可以輕鬆地修改或增加設定來達成目的。

第三章 - 真實世界的 Webpack

雖然在前一章已經知道如何配置了，但是如果不知道要配置什麼，那就像是空有一身武藝，卻不知道如何配招一樣。本章會以真實的使用情境出發，說明如何使用 Webpack 配置出符合情境的設定，並解決問題。

希望讀完本章後，讀者可以知道大部分的使用場景，並且能作出對應的處置。

第四章 - 解構 Webpack

本章會深入學習 Webpack 內部的實作方式，讓讀者了解它內部的構造，並且自己動手實現 Webpack 眾多豐富的功能。

讀完本章後，希望讀者可以吸收 Webpack 的設計理念，並將其運用在其他專案中。

總結

本系列的前兩章是基礎的章節，而後兩章會是比較進階的內容，各位讀者可以配合自己目前對於 Webpack 的掌握度決定要讀的篇章。

接著就跟我一起開始這趟 Webpack 的尋寶之旅吧！

附註

• 文章中如果有錯誤，還請各位大大留言，讓小弟可以做修改及學習。
• 文中的引用來源都會附上，如有遺漏，請各位大大提醒小弟。
• 本系列會同步至 GitHub 上。